<template>
  <!--现金存款-->
  <div class="cunkuan">
    <p><img src="../../assets/banner.png" alt="" width="100%"></p>
    <wv-group title="存款金额" class="cishu">
      <wv-input placeholder="请输入金额" type="number" v-model="amount"></wv-input>
    </wv-group>
    <wv-group title="存款银行" class="cishu">
      <wv-cell
        title="存款银行"
        is-link
        :value="cata | cataFilter"
        @click.native="cataPickerShow = true"
      />
      <wv-picker
        :visible.sync="cataPickerShow"
        v-model="cata"
        :columns="cataColumns"
        @confirm="confirmCata"
      />
    </wv-group>
    <p class="uploadtitle">上传支付凭证</p>
    <div class="upload" @click="showUpload()">
      <p><img src="../../assets/upload.png" alt="" width="36" v-if="filePath==''"> <img :src="filePath | imgPathFilter" width="100%" height="100%" v-model="filePath" v-else></p>
      上传支付凭证
    </div>
    <wv-group title="备注" class="beizhus">
      <wv-textarea placeholder="请输入备注" :rows="6" show-counter max-length="500" v-model="remark"></wv-textarea>
    </wv-group>
    <router-link to="/cunkuanjilu" tag="p" class="cunkuanjilu">存款记录</router-link>
    <p class="offer" @click="gofinish()">完成</p>

  </div>
</template>

<script type="text/ecmascript-6">
  import {wxApi} from '../../../test/unit/flyme_weixin'
  import {uploadImg, employeeDepositSub} from '../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        cataPickerShow: false,
        cata: ['中国银行'],
        cataColumns: [
          {
            values: [
              '中国银行',
              '建设银行'
            ],
            defaultIndex: 0
          }
        ],
        actionsheetVisible: false,
        amount: '',
        filePath: '',
        remark: ''
      };
    },
    methods: {
      checkFrom(amount, filePath){
        let msg = {};
        if (this.$myUtils.isNull(amount)) {
          msg['result'] = false;
          msg['info'] = '请输入存款金额';
          return msg;
        }
        if (this.$myUtils.isNull(filePath)) {
          msg['result'] = false;
          msg['info'] = '请上传存款凭证';
          return msg;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      confirmCata (picker) {
        this.cata = picker.getValues()
      },
      showUpload () {
        this.initChooseImageWxapi();
      },
      gofinish(){
        let amount = this.amount;
        let voucherImg = this.filePath;
        let msg = this.checkFrom(amount, voucherImg);
        if(!msg.result){
          Toast.text(msg.info);
          return;
        }
        let params = {amount: amount, depositBank: this.cata[0], voucherImg: voucherImg, remark: this.remark};
        employeeDepositSub(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.$router.push('cunkuanjilu');
          } else {
            Toast.fail(res.info);
          }
        })
      },
      initChooseImageWxapi(){
        let that = this;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            let imgId = res.serverId;
            let params = {
              'pojoName': 'deposit',
              'businessKey': '',
              'imgId': imgId
            };
            uploadImg(params).then(res => {
              if (res.code == 100) {
                that.filePath = res.object.filePath;
              } else {
                Toast.fail('上传失败');
              }
            })
          }
        });
      }
    },
    mounted () {
    },
    created() {
      wxApi.init();
    },
    filters: {
      cataFilter (val) {
        if (Array.isArray(val)) {
          return val.toString()
        } else {
          return '请选择'
        }
      }
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .cunkuan .weui-cells__title, .cunkuanjilu {
    color: #f98e3c;
  }

  .cunkuan {
    padding-bottom: 70px;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f98e3c;
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 2;
  }

  .uploadtitle {
    font-size: 13px;
    color: #f98e3c;
    margin: 0px 15px;
    text-align: left;
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
  }

  .upload {
    border: 2px dashed #f98e3c;
    text-align: center;
    color: #f98e3c;
    font-size: 13px;
    padding: 30px 10px;
    margin: 15px 15px 20px;
    p {
      margin-bottom: 10px;
    }
  }
</style>
